import { StackScreenProps } from "@react-navigation/stack"
import {
  aggregationForFilter,
  AggregationName,
  FilterData,
  FilterDisplayName,
  FilterParamName,
} from "lib/Components/ArtworkFilter/ArtworkFilterHelpers"
import { ArtworksFiltersStore, useSelectedOptionsDisplay } from "lib/Components/ArtworkFilter/ArtworkFilterStore"

import { ArtworkFilterNavigationStack } from "lib/Components/ArtworkFilter"
import { sortBy } from "lodash"
import React from "react"
import { MultiSelectOptionScreen } from "./MultiSelectOption"
import { useMultiSelect } from "./useMultiSelect"

interface ArtistIDsArtworksOptionsScreenProps
  extends StackScreenProps<ArtworkFilterNavigationStack, "ArtistIDsOptionsScreen"> {}

export const ArtistIDsArtworksOptionsScreen: React.FC<ArtistIDsArtworksOptionsScreenProps> = ({ navigation }) => {
  const selectedOptions = useSelectedOptionsDisplay()
  const aggregations = ArtworksFiltersStore.useStoreState((state) => state.aggregations)
  const selectFiltersAction = ArtworksFiltersStore.useStoreActions((state) => state.selectFiltersAction)

  const selectedArtistIFollowOption = selectedOptions.find((value) => {
    return value.paramName === FilterParamName.artistsIFollow
  })

  const aggregation = aggregationForFilter(FilterParamName.artistIDs, aggregations)
  const artistDisplayOptions =
    aggregation?.counts.map((aggCount) => {
      return {
        displayText: aggCount.name,
        paramName: FilterParamName.artistIDs,
        paramValue: aggCount.value,
        filterKey: "artist",
      }
    }) ?? []

  const { handleSelect, isSelected } = useMultiSelect({
    options: artistDisplayOptions,
    paramName: FilterParamName.artistIDs,
  })

  const formattedArtistOptions = artistDisplayOptions.map((option) => ({ ...option, paramValue: isSelected(option) }))
  const sortedArtistOptions = sortBy(formattedArtistOptions, ["displayText"])

  // Add in Artists I Follow at the start of the list
  const allOptions = [
    {
      displayText: "All Artists I Follow",
      paramName: FilterParamName.artistsIFollow,
      paramValue: !!selectedArtistIFollowOption?.paramValue,
    },
    ...sortedArtistOptions,
  ]

  const selectOption = (option: FilterData, updatedValue: boolean) => {
    if (option.paramName === FilterParamName.artistsIFollow) {
      selectFiltersAction({
        displayText: "All Artists I Follow",
        paramName: FilterParamName.artistsIFollow,
        paramValue: !selectedArtistIFollowOption?.paramValue,
      })
    } else {
      handleSelect(option, updatedValue)
    }
  }

  // If FOLLOWED_ARTISTS is included in the list of available aggregations, it means
  // the user has at least one artist they follow in the fair.
  const hasWorksByFollowedArtists = !!aggregations.find((agg) => agg.slice === ("FOLLOWED_ARTISTS" as AggregationName))
  const itemIsDisabled = (item: FilterData): boolean => {
    return item.paramName === FilterParamName.artistsIFollow && !hasWorksByFollowedArtists
  }

  return (
    <MultiSelectOptionScreen
      filterHeaderText={FilterDisplayName.artistIDs}
      filterOptions={allOptions}
      onSelect={selectOption}
      navigation={navigation}
      isDisabled={itemIsDisabled}
    />
  )
}
